<template>
	<view class="being">
		<TopCard></TopCard>


		<view class="top-background">

		</view>

		<view class="hot-card">
			<view class="card-inner">
				<view class="info-title">
					<view class="title-icon">
						<image src="@/static/tabbar/course_on.png"></image>
					</view>
					<view>连续学习 <span style="color: #378F99;font-weight: bold;margin: 0 8rpx;">3</span> 天</view>
				</view>
				<view class="card-info" v-if="$isLogin() && fixedCourseList.length > 0"
					@click="goCourseStudy(fixedCourseList[0].id)">
					<view class="cover">
						<image mode="aspectFill" :src="fixedCourseList[0].cover"></image>
					</view>
					<view class="card-info-right">
						<view class="name">{{fixedCourseList[0].name}}</view>
						<view class="description">
							<view>{{fixedCourseList[0].progress}}%</view>
							<view class="out">
								<view class="inner" :style="{'width': fixedCourseList[0].progress + '%'}"></view>
							</view>
						</view>
					</view>
					<uni-icons type="right" size="15" color="#8b8b8b"></uni-icons>
				</view>
				<view class="card-info" v-else>
					<view
						style="display: flex;flex-direction: row;height: 120rpx;width: 100%;justify-content: center;align-items: center;"
						v-if="$isLogin()">
						选择一门知桨开始学习吧
					</view>
					<view @click="toLogin()"
						style="display: flex;flex-direction: row;height: 120rpx;width: 100%;justify-content: center;align-items: center;"
						v-else>
						点击登录，开始学习
					</view>
				</view>
			</view>
		</view>




		<view class="content">
			<view class="title">
				<view class="text">知桨类型</view>
				<view class="mark"></view>
			</view>
			<view class="content-buttons">
				<view class="content-button" @click="toManage('space-list')">
					<view class="icon">
						<image src="https://www.cdn.kxcdedu.top/image/default/ABE3FD4B5C22411DAC59F66579D6DF51-6-2.png">
						</image>
					</view>
					<view class="text">模型</view>
				</view>
				<view class="content-button" @click="toManage('question-list')">
					<view class="icon">
						<image src="https://www.cdn.kxcdedu.top/image/default/7E9D3042C5404679A21A979F615CB9FB-6-2.png">
						</image>
					</view>
					<view class="text">模式</view>
				</view>
				<view class="content-button" @click="toManage('team-list')">
					<view class="icon">
						<image src="https://www.cdn.kxcdedu.top/image/default/2FD75BD91F22480198DACE574F8B0276-6-2.png">
						</image>
					</view>
					<view class="text">模因</view>
				</view>
				<view class="content-button" @click="toManage('wind-list')">
					<view class="icon">
						<image src="https://www.cdn.kxcdedu.top/image/default/E9E6477A133C455782E49063E9DB0BA0-6-2.png">
						</image>
					</view>
					<view class="text">平衡</view>
				</view>
			</view>


			<view class="title">
				<view class="text">常驻知桨</view>
				<view class="mark"></view>
				<view class="right" @click="toCourseManage">
					<view>全部</view>
					<uni-icons style="margin-left: 10rpx;" type="right" size="10" color="#8b8b8b"></uni-icons>
				</view>
			</view>
			<view class="fixed-course-list" v-if="fixedCourseList != null && fixedCourseList.length > 0">
				<view v-for="(course,index) in fixedCourseList"
					:style="{'margin-bottom' : index > fixedCourseList.length - 2 ? '' : '10rpx' }" class="course"
					@click="goCourseStudy(course.id)">
					<view class="cover">
						<image mode="aspectFill" class="image" :src="course.cover"></image>
					</view>
					<view class="info">
						<view class="name">{{course.name}}</view>
						<view class="description">
							<view>{{course.progress}}%</view>
							<view class="out">
								<view class="inner" :style="{'width': course.progress + '%'}"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="fixed-course-empty" v-else>
				<view class="text">暂时没有常驻，去探索发现更多</view>
			</view>

			<view class="title">
				<view class="text">推荐知桨</view>
				<view class="mark"></view>
			</view>
			<view class="course-list">
				<view v-for="(course,index) in pushCourseList" @click="goCourseDetail(course.id)" class="course">
					<view class="cover">
						<img class="image" :src="course.cover"></img>
					</view>
					<view class="info">
						<view class="name">{{course.name}}</view>
						<view class="description">{{course.description}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import SwipperTest from '@/components/Xsuu-swiper.vue'
	import TopCard from '@/components/top-card.vue'
	export default {
		components: {
			SwipperTest,
			TopCard
		},
		data() {
			return {
				fixedCourseList: [],
				pushCourseList: []
			}
		},
		onLoad() {

		},
		onShow() {
			this.listPushCourse()

			if (this.$isLogin()) {
				this.listFixedCourse()
			}
		},
		methods: {
			listPushCourse() {
				this.$api.listPushCourse().then(res => {
					this.pushCourseList = res.data
				})
			},
			listFixedCourse() {
				this.$api.listFixedCourse().then(res => {
					this.fixedCourseList = res.data
				})
			},


			toManage(){
				uni.showToast({
					icon:'none',
					title:'暂未开放'
				})
			},

			goCourseDetail(courseId) {
				console.log(courseId)
				uni.navigateTo({
					url: '/pages_being/course/course-detail?courseId=' + courseId
				})
			},
			goCourseStudy(courseId) {
				console.log(courseId)
				uni.navigateTo({
					url: '/pages_being/course/course-study?courseId=' + courseId
				})
			},
			toCourseManage() {
				if(!this.$isLogin()){
					this.toLogin()
					return
				}
				uni.navigateTo({
					url: '/pages_being/course/course-manage'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.being {
		background-color: #FAFAFA;
		min-height: 100vh;


		.top-background {
			position: absolute;
			z-index: 0;
			width: 750rpx;
			height: 320rpx;
			background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: 0 0 40rpx 40rpx;
		}

		.hot-card {

			padding-top: 200rpx;
			
			// #ifdef APP
			padding-top: 240rpx;
			// #endif

			// #ifdef H5
			padding-top: 180rpx;
			// #endif


			.card-inner {
				width: 690rpx;
				height: 250rpx;
				margin-left: 30rpx;
				background-color: #FFFFFF;
				z-index: 3;
				position: relative;
				border-radius: 20rpx;


				.info-title {
					width: 650rpx;
					padding: 20rpx;

					display: flex;
					flex-direction: row;
					align-items: center;


					.title-icon {
						width: 60rpx;
						height: 60rpx;
						margin-right: 10rpx;
					}


				}

				.card-info {
					width: 650rpx;
					padding: 0 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.cover {
						width: 200rpx;
						height: 120rpx;
						border-radius: 10rpx;
						overflow: hidden;
					}

					.card-info-right {
						width: 380rpx;
						height: 110rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;


						.description {
							margin-top: 5rpx;
							font-size: 28rpx;
							color: gray;
							width: 100%;
							display: flex;
							flex-direction: row;
							align-items: center;

							.out {
								width: 240rpx;
								margin-left: 10rpx;
								height: 8rpx;
								border-radius: 5rpx;
								background-color: #ececec;

								.inner {
									height: 8rpx;
									border-radius: 5rpx;
									background-color: #5DACB1;
								}

							}

						}
					}

				}

			}
		}




		.content {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;

			.content-buttons {
				width: 690rpx;
				margin-left: 30rpx;

				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.content-button {
					width: 150rpx;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 20rpx;

					background-color: rgba(255, 255, 255, 0.8);

					.icon {
						width: 70rpx;
						height: 70rpx;
						border-radius: 20rpx;
						overflow: hidden;
					}

					.text {
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #595959;
					}
				}
			}

			.title {
				font-size: 36rpx;
				font-weight: bold;
				margin: 30rpx 0 30rpx 30rpx;
				position: relative;
				width: 690rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.mark {
					width: 45rpx;
					height: 35rpx;
					background-color: #B3DFDE;
					border-radius: 40%;
					position: absolute;

					top: 5rpx;
					left: 0;
					z-index: 1;
				}

				.text {
					padding-left: 15rpx;
					position: relative;
					z-index: 2;
					letter-spacing: 4rpx;
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 28rpx;
					margin-bottom: 5rpx;
					font-weight: normal;
				}

			}

			.island-list {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 720rpx;
				margin-left: 30rpx;
				height: 180rpx;
				overflow: scroll;

				.island {
					width: 300rpx;
					height: 180rpx;
					margin-right: 30rpx;
					border-radius: 20rpx;
					color: white;

					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-end;
					box-shadow: 1px 1px 8px 2px #e9eee9;
				}

			}

			.fixed-course-empty {
				width: 690rpx;
				margin-left: 30rpx;
				height: 250rpx;
				border-radius: 20rpx;
				background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
				background-repeat: no-repeat;
				background-size: cover;

				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.text {
					letter-spacing: 5rpx;
					background: linear-gradient(90deg, rgba(55, 143, 153, 1) 0%, rgba(171, 111, 94, 0.43) 51.31%, rgba(102, 173, 239, 1) 100%);
					-webkit-background-clip: text;
					color: transparent;
					font-weight: bold;
				}


			}

			.fixed-course-list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;
				width: 690rpx;
				margin-left: 30rpx;


				.course {
					display: flex;
					flex-direction: column;
					width: 330rpx;
					justify-content: space-between;
					border-radius: 20rpx;


					background-image: url(https://www.cdn.kxcdedu.top/image/default/1D43769B095647DE966E695395504049-6-2.png);
					background-repeat: no-repeat;
					background-size: cover;


					.cover {
						width: 200rpx;
						height: 120rpx;
						border-radius: 10rpx;
						overflow: hidden;

						margin: 40rpx 0 0 30rpx;
					}

					.info {
						margin-left: 30rpx;
						padding-bottom: 10rpx;

						.name {
							margin-top: 10rpx;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 1;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}

						.description {
							margin-top: 5rpx;
							font-size: 28rpx;
							color: gray;
							width: 100%;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;

							.out {
								width: 200rpx;
								margin-right: 30rpx;
								height: 8rpx;
								border-radius: 5rpx;
								background-color: #ececec;

								.inner {
									height: 8rpx;
									border-radius: 5rpx;
									background-color: #5DACB1;
								}

							}

						}
					}

				}
			}

			.course-list {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				width: 690rpx;
				justify-content: space-between;
				margin-left: 30rpx;


				.course {
					display: flex;
					flex-direction: column;

					width: 330rpx;
					height: 300rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;

					margin-bottom: 30rpx;



					.cover {
						width: 200rpx;
						height: 120rpx;
						border-radius: 10rpx;
						overflow: hidden;

						margin: 40rpx 0 0 30rpx;
					}

					.info {
						width: 270rpx;
						margin-left: 30rpx;
						margin-top: 5rpx;
						display: flex;
						flex-direction: column;


						.name {
							font-size: 32rpx;
							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 1;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}

						.description {
							margin-top: 5rpx;
							font-size: 28rpx;
							color: gray;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 2;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}

					}

				}
			}

		}

	}


	image {
		width: 100%;
		height: 100%;
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>
